<template>
	<view class="list">
		<button @click="goOption" size="max" type="primary">option</button>
		<view class="item" v-for="(item,index) in joks" wx:key="index">
			{{item.summary}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				joks: [], //笑话数组
				page: 1, //当前页
			}
		},
		onLoad() {
			this.getJok(this.page) //显示当前页数的内容
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page++; //笑话页数
			// 设置定时器一秒下拉加载时间
			var time = setTimeout(() => {
				this.getJok(1) // 执行下拉函数（为 1 新数据加到前面）
				uni.startPullDownRefresh(); //停止下拉
				clearTimeout(time)
			}, 1000);
		},
		// 触底刷新
		onReachBottom() {
			this.page++; //笑话页数
			this.getJok(this.page); //在内容后面加载（page++之后的）当前页数的内容
		},
		methods: {

			getJok(index) {
				uni.request({
					url: 'http://dida100.com/mi/list.php?page=' + this.page, // + index(页数)
					success: (res) => {
						if (index == 1) {
							console.log("下拉了3")
							// 下拉刷新，新数据加到前面
							this.joks = res.data.result.concat(this
								.joks); // 数据源数组 concat（合并）到this.joks（新数组），然后赋值给 this.joks(定义的空函数在)
							// 加载提示
							uni.showToast({
								title: '新加载' + res.data.result.length + "条笑话",
								icon: "none"
							})
							// 停止下拉刷新
							uni.stopPullDownRefresh();
						} else {
							//否则把更新的数据加载到 后面
							this.joks = this.joks.concat(res.data.result);
						}
					}
				});
			},
			goOption() {
				uni.navigateTo({
					url: "/pages/options/options?count=10&title=来自JS跳转"
				})
			},
		}
	}
</script>

<style>
	.list .item {
		padding: 30rpx;
		border-bottom: 1rpx solid #ccc;
		box-sizing: border-box;
	}
</style>
